<!--
 * @Description: 当前网元活动告警
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:30:11
 * @LastEditTime: 2021-11-09 17:22:41
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="page-content" style="padding: 0">
    <table-bar
      :showTop="false"
      :layout="['search', 'column']"
      :columns="columns"
      @changeColumn="changeColumn"
    >
      <div slot="top">
        <el-form :model="filterSearch" :label-width="labelWidth" label-position="right">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 租户名称  请输入租户名称-->
              <el-form-item :label="$t('user.TenantName')">
                <el-input
                  v-model.trim="filterSearch.dgName"
                  :placeholder="$t('user.InputTenantName')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <!--告警等级 请选择等级 -->
              <el-form-item :label="$t('alarms.AlarmLevel')">
                <el-select
                  v-model="filterSearch.level"
                  multiple
                  collapse-tags
                  style="width:100%;"
                  :placeholder="$t('systerms.SelectGrade')"
                  v-adaption
                >
                  <!-- 严重 主要 次要 警告-->
                  <el-option :label="$t('alarms.Critical')" value="Critical"></el-option>
                  <el-option :label="$t('alarms.Major')" value="Major"></el-option>
                  <el-option :label="$t('alarms.Minor')" value="Minor"></el-option>
                  <el-option :label="$t('alarms.Warning')" value="Warning"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 确认状态 请选择状态 确认 反确认 -->
              <el-form-item :label="$t('alarms.ConfirmState')">
                <el-select
                  v-model="filterSearch.state"
                  style="width:100%;"
                  :placeholder="$t('alarms.SelectStatus')"
                  v-adaption
                >
                  <el-option :label="$t('alarms.Confirm')" value="ACKSTATE_ACKNOWLEDGED"></el-option>
                  <el-option :label="$t('alarms.Unconfirm')" value="ACKSTATE_UNACKNOWLEDGED"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 发生时间 至 开始日期 结束日期-->
              <el-form-item :label="$t('alarms.OccurredTime')">
                <el-date-picker
                  style="width:100%;"
                  v-model="filterSearch.dayTime"
                  type="datetimerange"
                  :range-separator="$t('systerms.To')"
                  :start-placeholder="$t('systerms.StartTime')"
                  :end-placeholder="$t('systerms.EndTime')"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
              <!--搜索 重置-->
              <el-button type="primary" @click="search">{{$t('systerms.Search')}}</el-button>
              <el-button @click="reset">{{$t('systerms.Reset')}}</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
    </table-bar>

    <tao-table
      class="table-box"
      :data="dataList"
      :page="page"
      @changePage="changePage"
      :showPage="true"
      ref="table"
    >
      <!-- 详情 -->
      <el-table-column :label="$t('systerms.Details')" align="center" width="80" type="expand">
        <template slot-scope="scope">
          <info :row="scope.row" />
        </template>
      </el-table-column>
      <el-table-column
        label="ID"
        align="center"
        width="100"
        sortable
        prop="id"
        v-if="columns[0].show"
      />
      <!-- 网元 -->
      <el-table-column
        :label="$t('alarms.NEName')"
        align="center"
        width="200"
        prop="neUserlabel"
        v-if="columns[1].show"
      />
      <!-- 租户名称 -->
      <el-table-column
        :label="$t('user.TenantName')"
        align="center"
        width="200"
        prop="dgName"
        v-if="columns[2].show"
      >
        <template slot-scope="scope">{{scope.row.extAttrs.dgName}}</template>
      </el-table-column>
      <!-- 设备告警码 -->
      <el-table-column
        :label="$t('alarms.DeviceCode')"
        align="center"
        width="120"
        sortable
        prop="code"
        v-if="columns[3].show"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.deviceCode === -255">{{scope.row.extAttrs.devCode}}</span>
          <span v-else>{{scope.row.deviceCode}}</span>
        </template>
      </el-table-column>
      <!-- 位置 -->
      <el-table-column
        :label="$t('alarms.Location')"
        align="center"
        width="150"
        show-overflow-tooltip
        prop="positionName"
        v-if="columns[4].show"
      />
      <!-- 等级 -->
      <el-table-column
        :label="$t('alarms.Severity')"
        align="center"
        sortable
        width="120"
        prop="severity"
        v-if="columns[5].show"
      >
        <template slot-scope="scope">
          <!--严重  主要 次要 警告-->
          <span v-if="scope.row.severity === 'Critical'">
            <i class="i-yz"></i>
            {{$t('alarms.Critical')}}
          </span>
          <span v-if="scope.row.severity === 'Major'">
            <i class="i-zy"></i>
            {{$t('alarms.Major')}}
          </span>
          <span v-if="scope.row.severity === 'Minor'">
            <i class="i-cy"></i>
            {{$t('alarms.Minor')}}
          </span>
          <span v-if="scope.row.severity === 'Warning'">
            <i class="i-jg"></i>
            {{$t('alarms.Warning')}}
          </span>
        </template>
      </el-table-column>
      <!-- 原因 -->
      <el-table-column
        :label="$t('alarms.Cause')"
        width="300"
        show-overflow-tooltip
        prop="title"
        v-if="columns[6].show"
      />
      <!-- 数据类型  -->
      <!-- <el-table-column
        :label="$t('alarms.Class')"
        align="center"
        width="170"
        sortable
        prop="alarmClass"
        v-if="columns[7].show"
      >
        <template slot-scope="scope">{{$t('alarms.' + scope.row.alarmClass)}}</template>
      </el-table-column>-->
      <!-- 发生时间  -->
      <el-table-column
        :label="$t('alarms.OccurredTime')"
        align="center"
        width="170"
        sortable
        prop="occurredTime"
        v-if="columns[7].show"
      >
        <template slot-scope="scope">{{scope.row.occurredTime | filterTime}}</template>
      </el-table-column>
      <!-- 清除时间  -->
      <el-table-column
        :label="$t('alarms.ClearedTime')"
        align="center"
        width="170"
        sortable
        prop="clearedTime"
        v-if="columns[8].show"
      >
        <template slot-scope="scope">{{scope.row.clearedTime | filterTime}}</template>
      </el-table-column>
      <!-- 更新时间 -->
      <el-table-column
        :label="$t('alarms.UpdateTime')"
        align="center"
        width="170"
        sortable
        prop="updateTime"
        v-if="columns[9].show"
      >
        <template slot-scope="scope">{{scope.row.updateTime | filterTime}}</template>
      </el-table-column>
      <!-- 确认状态 -->
      <el-table-column
        :label="$t('alarms.ConfirmState')"
        align="center"
        width="140"
        sortable
        prop="alarmAckState"
        v-if="columns[10].show"
      >
        <template slot-scope="scope">
          <!-- 反确认  确认-->
          <span
            v-if="scope.row.alarmAckState === 'ACKSTATE_UNACKNOWLEDGED'"
          >{{$t('alarms.Unconfirm')}}</span>
          <span v-if="scope.row.alarmAckState === 'ACKSTATE_ACKNOWLEDGED'">{{$t('alarms.Confirm')}}</span>
        </template>
      </el-table-column>
      <!--操作 更多 -->
      <el-table-column fixed="right" align="center" :label="$t('alarms.Action')" width="130px">
        <template slot-scope="scope">
          <el-dropdown
            size="small"
            placement="bottom"
            trigger="click"
            v-power="ne.dgId === 100000 ? 0 : 2"
          >
            <span class="el-dropdown-link">
              {{$t('alarms.More')}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <!--清除 确认 反确认-->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="action('clear', scope)">{{$t('alarms.Clear')}}</el-dropdown-item>
              <el-dropdown-item @click.native="action('com', scope)">{{$t('alarms.Confirm')}}</el-dropdown-item>
              <el-dropdown-item @click.native="action('uncom', scope)">{{$t('alarms.Unconfirm')}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </tao-table>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import info from '../../alarms/info';

export default {
  components: { info },
  props: ['ne'],
  data () {
    return {
      dataList: [],
      filterSearch: {
        dgName: null,
        level: [],
        state: null,
        dayTime: null
      },
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      columns: [
        { name: 'ID', show: true },
        { name: '网元', show: true },
        { name: '租户名称', show: true },
        { name: '设备告警码', show: true },
        { name: '位置', show: true },
        { name: '等级', show: true },
        { name: '原因', show: true },
        // { name: '数据类型', show: true },
        { name: '发生时间', show: true },
        { name: '清除时间', show: true },
        { name: '更新时间', show: true },
        { name: '确认状态', show: true }
      ]
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  filters: {
    // 过滤时间
    filterTime (val) {
      if (val === undefined || val === null || val === '') {
        val = '';
      } else {
        val = val.substring(0, 19);
      }
      return val;
    }
  },
  computed: {
    labelWidth () {
      let currentLang = this.$i18n.locale;
      let temp = 80;
      if (currentLang === 'cn') {
        temp = 80;
      } else {
        temp = 140;
      }
      return temp + 'px';
    }
  },
  methods: {
    // 更多操作
    action (type, data) {
      let _this = this;
      switch (type) {
        case 'clear':
          _this.$confirm(this.$t('alarms.TipsClearAlarms'), this.$t('user.Tips'), {
            confirmButtonText: this.$t('user.Confirm'),
            cancelButtonText: this.$t('user.Cancel'),
            type: 'warning'
          }).then(() => {
            // 清除
            _this.$http.put({
              url: '/api/fm/current/clear',
              data: [data.row.alarmKey]
            }).then(result => {
              setTimeout(() => {
                _this.refresh();
                _this.$message.success(this.$t('alarms.ClearSucc'));
              }, 3000);
            });
          }).catch(() => {
            _this.$message({
              type: 'info',
              message: _this.$message.success(this.$t('alarms.CancelClear'))
            });
          });
          break;
        case 'com':
          _this.$confirm(this.$t('alarms.TipsUpdateStatusToConfirm'), this.$t('user.Tips'), {
            confirmButtonText: this.$t('user.Confirm'),
            cancelButtonText: this.$t('user.Cancel'),
            type: 'warning'
          }).then(() => {
            // 确认
            _this.$http.put({
              url: '/api/fm/current/confirm',
              data: [data.row.alarmKey]
            }).then(result => {
              setTimeout(() => {
                _this.refresh();
                _this.$message.success(this.$t('alarms.ConfirmSucc'));
              }, 3000);
            });
          }).catch(() => {
            _this.$message({
              type: 'info',
              message: this.$t('alarms.CancelConfirm')
            });
          });
          break;
        default:
          _this.$confirm(this.$t('alarms.TipsUpdateStatusToUNConfirm'), this.$t('user.Tips'), {
            confirmButtonText: this.$t('user.Confirm'),
            cancelButtonText: this.$t('user.Cancel'),
            type: 'warning'
          }).then(() => {
            // 反确认
            _this.$http.put({
              url: '/api/fm/current/unconfirm',
              data: [data.row.alarmKey]
            }).then(result => {
              setTimeout(() => {
                _this.refresh();
                _this.$message.success(this.$t('alarms.UnconfirmSucc'));
              }, 3000);
            });
          }).catch(() => {
            _this.$message({
              type: 'info',
              message: this.$t('alarms.CancelUNConfirm')
            });
          });
      }
    },
    // 搜索
    search () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 重置
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.filterSearch = {
        dgName: null,
        level: [],
        state: null,
        dayTime: null
      };
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        code: null,
        location: [{
          type: 'NE',
          data: [_this.ne.id]
        }],
        dgName: _this.filterSearch.dgName,
        severity: _this.filterSearch.level,
        startTime: _this.filterSearch.dayTime ? dayjs(_this.filterSearch.dayTime[0]).format('YYYY-MM-DD HH:mm:ss') : null,
        endTime: _this.filterSearch.dayTime ? dayjs(_this.filterSearch.dayTime[1]).format('YYYY-MM-DD HH:mm:ss') : null,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      if (_this.filterSearch.state) {
        params.confirmState = _this.filterSearch.state;
      }
      _this.$http.post({
        url: '/api/fm/sd/current',
        data: params
      }).then(res => {
        let { count, alarms } = res;
        _this.page.total = count;
        _this.dataList = alarms;
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .table-box {
    ::v-deep .el-button {
      padding: 0;
    }
    ::v-deep .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
  }
}
.i-yz {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #de4040;
  position: relative;
  top: 1px;
}
.i-zy {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #de8f40;
  position: relative;
  top: 1px;
}
.i-cy {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e9d426;
  position: relative;
  top: 1px;
}
.i-jg {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #86bcdb;
  position: relative;
  top: 1px;
}
</style>